<template>
  <el-container class="el-container">
    <el-header>
        <div>
          <span class="text-font">后台管理系统</span>
        </div>
      <el-menu mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-submenu index="1">
          <template slot="title">个人中心</template>
          <el-menu-item index="2-1" @click="logout">退出</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-header>
    <el-container>
      <el-aside :width=" isCollapse ? '66px' : '250px'">
        <div class="toggle-button" @click="toggleCollapse">|||</div>
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#333744" :collapse="isCollapse" :collapse-transition="false"
                 :router="true" :default-active="activeMenu" text-color="#fff" active-text-color="#409eff">
          <el-submenu :index="menu.path" v-for="menu in menuList" :key="menu.id">
            <template slot="title">
              <i class="iconfont icon-jiaoseguanli1"/>
              <span>{{menu.menuName}}</span>
            </template>

            <el-menu-item :index="subMenu.path" v-for="subMenu in menu.subMenus" :key="subMenu.id" @click="selectMenu(subMenu.id,subMenu.path,subMenu.menuName)">
              <i class="el-icon-notebook-2"></i>
              {{ subMenu.menuName }}
            </el-menu-item>
<!--            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>-->
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-tabs v-model="activeTab" type="border-card" closable @tab-remove="removeTab" @tab-click="selectTab">

          <el-tab-pane :key="item.name" v-for="(item,index) in tabData" :name="item.name">
            <span slot="label">
              <i class="el-icon-date"/>
              {{item.title}}
            </span>
          </el-tab-pane>







          <router-view/>
        </el-tabs>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
  export default {
    data() {
      return {
        isCollapse: false,
        activeMenu: '',
        menuList: [
          {
            id: '1',
            path: 'user',
            menuName: '用户管理',
            subMenus: [
              {
                id: '1-1',
                path: 'user',
                menuName: '用户列表'
              },
              {
                id: '1-2',
                path: 'log',
                menuName: '用户日志'
              }
            ]
          }
        ],


        tabData: [
            {
                title: '主页',
                name: 'welcome'
            }
        ],
        activeTab: 'welcome',
      }
    },
    created() {
      this.initMenu();
      this.activeMenu = window.localStorage.getItem("active_menu");
    },
    methods: {
      initMenu() {

      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      logout() {
        window.localStorage.clear();
        this.$router.push("/login");
      },
      toggleCollapse() {
        this.isCollapse = !this.isCollapse;
      },
      selectMenu(id,path,menuName) {
        window.localStorage.setItem("active_menu",path);
        this.activeMenu = path;


        let isExist = false;
        this.tabData.forEach(item=>{
          if(item.title === menuName){
            isExist = true;
            return;
          }
        });

        if(!isExist){
          this.tabData.push({
            title: menuName,
            name: path,
          });
        }
        this.activeTab = path;

      },
      removeTab(targetName) {
        if(targetName === 'welcome')
            return;
        let tabs = this.tabData;
        let activeName = this.activeTab;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab){
                activeName = nextTab.name;
              }
            }
          });
        }
        this.activeTab = activeName;
        this.$router.push('/'+activeName);
        this.tabData = tabs.filter(tab => tab.name !== targetName);
      },
      selectTab(tab, event){
        let path = tab._props.name;
        this.$router.push('/'+path);
      },
    }
  }
</script>

<style scoped>
.el-container {
  height: 100%;
  width: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 30px;
}
.el-header > div {
  display: flex;
  align-items: center;
}
.el-header > div span {
  margin-left: 15px;
}

.el-aside {
  background-color: #333744;
}

.el-main {
  background-color: #eaedf1;
}
.toggle-button{
  background-color: #333744;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.iconfont{
  margin-right: 10px;
}

</style>
